<!DOCTYPE html>
<html dir="ltr" lang="en-US">
   <head>
      <meta charset="UTF-8" />
      <title>A date range picker for Bootstrap</title>
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" media="all" href="./mylib/multiple_daterangepicker.css" />
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="moment.js"></script>
      <script type="text/javascript" src="./mylib/multiple_daterangepicker.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
   </head>
   <!-- <style>
      .dr-mulite-wrap{
          position: relative;
      }
      .dr-list{
          box-sizing: border-box;
          min-height: 40px;
          list-style: none;
          padding: 0;
          margin: 0;
          border: 1px solid #000;
          border-radius: 3px;
      }
      .dr-list:after{
          content: '';
          display: block;
          height: 0;
          clear: both;
      }
      .dr-item{
          float: left;
          padding: 3px 5px;
          border: 1px solid #ccc;
          margin: 5px;
      }
      .dr-del{
          font-style: normal;
          padding-left: 5px;
          color: red;
          cursor: pointer;
      }
      .dr-btn-groups:after{
          content: '';
          display: block;
          clear: both;
      }
      .dr-btn-groups .btn{
          padding: 4px;
          background: rgb(249, 249, 249);
          -webkit-box-shadow:none;
          box-shadow:none;
          font-size: 12px;
          margin:5px;
      }
      .dr-btn-groups .btn:focus{
          outline: none;
      }
      .dr-btn-groups .btn-close{
          float: left;
          background: #eee;
          border:1px solid #eee;
          color: #333;
      }
      .dr-btn-groups .btn-confirm{
          float: right;
          background: #afde5c;
          border:1px solid #afde5c;
          color: #fff;
      }
      .dr-datemodal-wrap{
          position: relative;
      }
      .dr-datemodal{
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1000;
          min-width: 300px;
          border-radius: 5px;
          border: 1px solid #ccc;
          background: rgb(249, 249, 249);
          text-align: center;
      }
      .dr-datemodal-wrap.show {
          display: block;
      }
      .dr-datemodal .row{
          margin: 0;
      }
      .dr-datemodal .bic_calendar{
          border: 0;
      }
      .dr-datemodal .bic_calendar .selection{
          background: rgba(29, 137, 207, .9);
      }
   </style> -->
   <body>
    <div class="container">
      <div class="row">

        <div class="col-md-4 demo">
          	<h4>Your Multiple Date Range Picker</h4>
		  	<div class="daterange" id="demo">
				<ul class="dr-list">
				</ul>
			</div>
        </div>
        <div class="col-md-4">
            <h4>origin date range picker</h4>
            <input type="text" id="demo2">
        </div>
        <div class="col-md-4">
            <h4>origin date range picker</h4>
            <input type="text" id="demo3">
        </div>
      </div>
    </div>
    <script>
      $(function () {

        $('#demo').daterangepicker({
            inputName: 'dateRange',
            autoUpdateInput: true,
            multipleRange: true,
            timePicker: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss'
            },
            multipleRangeData: [
                {
                    "advert_id":26051,
                    "stime":"2018-03-05 00:00:00",
                    "etime":"2018-03-07 23:59:59",
                    "times":0,
                    "start_date":"2018-03-05 00:00:00",
                    "end_date":"2018-03-07 23:59:59"
                },
                {
                    "advert_id":26051,
                    "stime":"2018-03-06 00:00:00",
                    "etime":"2018-03-15 23:59:59",
                    "times":0,
                    "start_date":"2018-03-06 00:00:00",
                    "end_date":"2018-03-15 23:59:59"
                }
            ]
        })



        $('#demo2').daterangepicker({
            autoUpdateInput: true,
            multipleRange: false,
            timePicker: false,
            locale: {
                format: 'YYYY/MM/DD'
            }
            // el: '#demo2'
        })
        
        $('#demo3').daterangepicker({
            autoUpdateInput: true,
            multipleRange: false,
            timePicker: false,
            locale: {
                format: 'YYYY/MM/DD'
            }
            // el: '#demo2'
        })
        


      })
    </script>
   </body>
</html>
